<template>
     <!-- 左侧开始 -->
    <!-- 留言页css在default.css -->
    <section class="mysection">
        <div class="comment-area">
            <img src="../../../static/front-vue/images/comment_main.png"
                 style="width:90%;"
                 alt="HumbleYuan个人博客留言板"/>
            <h4 class="index-title">
                <i class="el-comment-alt"></i>
                当前共有{{commentNum}}条留言
                <a href="javascript:void(0)" @click="showInput()"><i class="el-edit"></i>发表留言</a>
                <!-- 留言输入框子组件 -->
                <div class="write-reply">                         
                    <input-component :show="showCommentInput"
                                :isRootComment="true"                          
                                @cancel="cancelInput"
                                @confirmMain="commitMainComment">
                    </input-component> 
                </div>
            </h4>
            <div class="comment_top">
                <ul class="comment_ul">
                    <li>
                        评论
                    </li>                                                     
                </ul>
                <div class="comment_info_class">
                    <span class="info">{{personNum}}</span>
                    <span class="exit_text">人参与,</span> 
                    <span class="info">{{commentNum}}</span>
                    <span class="exit_text">条评论</span>                     
                </div>
                <hr/> 
            </div>
            <!-- 评论模块子组件 -->          
            <commentMain :comments="comments"
                         @loadComments="loadComments"></commentMain>
                   
        </div>
    </section>
</template>

<script>

import commentMain from "./comment_main";
import commentInput from './comment_input'
import * as getIp from "../../../static/front-vue/js/getip.js"
import {getTime} from "../../../static/front-vue/js/time.js"

export default {
    name:"leave_comments",
    components:{
        "commentMain":commentMain,
        "input-component": commentInput
    },
    data() {
        return {
            showCommentInput:false,
            comments:[],
            personNum:"",   //多少人参与
            commentNum:"",  //总评论数
            /**
            * 主评论对象,属性只是列出，会在提交时使用={}来清空
            */
            mainCommentObj: {
                mContent:"",
                mCommitTime:"",
                mUsername:"",
                mPwd:"",
                mCommentType:"",//1针对某篇文章，2是针对整个留言板
                mImageUrl:"",
                ip:"",
                area:"",
                newUserPwd:"",
                userType:""
            }           
        }
    },
    created:function() {        
        //mounted生命周期：在html渲染后执行
        this.loadComments();
    }, 
    methods: {
        //显示输入框
        showInput() {
            this.showCommentInput = true;
        },
        //取消输入框
        cancelInput() {
            this.showCommentInput = false;
        },

        //获取所有评论数据
        loadComments () {
            var _this = this; 
                                
            this.$axios.get('/comment/allComments').then(resp => {
                this.$nextTick(()=>{
                    if (resp && resp.status === 200) {                    
                        _this.comments = resp.data.commentList;//暂时后台传commentMain                        
                        _this.personNum = resp.data.personNum ;
                        _this.commentNum = resp.data.commentNum;
                       
                        console.log(JSON.stringify(_this.comments));                                   
                    }
                })	                                
            });
               
        },
  
        /**
         * 提交主评论，对整个留言板的评论
         */
        commitMainComment(visitUser,value) {
            /**
             * visitUser数据格式：
             *   visitUser:{
             *       username:"",  //评论者用户名
             *       pwd:"",       //老用户密码
             *       setPwd:"",    //新用户设定的密码
             *       imageUrl:"",    //头像url
             *       userType:"visitor"    //用户类型
             *   }
             */
            console.log(visitUser);
            
            this.mainCommentObj = {};
            
            this.mainCommentObj.ip = sessionStorage.getItem("ip");
            this.mainCommentObj.area = sessionStorage.getItem("area");

            this.mainCommentObj.mContent = value;
            this.mainCommentObj.mCommitTime = getTime();

            this.mainCommentObj.mUsername = visitUser.username;
            this.mainCommentObj.mPwd = visitUser.pwd;
            this.mainCommentObj.mCommentType = 2;   //针对留言板
            this.mainCommentObj.newUserPwd = visitUser.setPwd;
            this.mainCommentObj.mImageUrl = visitUser.imageUrl;
            this.mainCommentObj.userType = visitUser.userType;

            this.commitByAxios(this.mainCommentObj,"/comment/commitMainComment");

        },
        
        /**
         * axios提交操作
         */
        commitByAxios(commentInfo,commitUrl) {
            var _this = this; 

            console.log(commentInfo + " axios");
            _this.$axios({
                method:"post",
                url:commitUrl,
                data:{
                    comment:commentInfo
                }}).then((res)=>{
                    if (resp && resp.status === 200) 
                    {                    
                    //接收提交执行的结果
                    if(resp.data == "success") {
                        alert("提交成功");
                        //触发父组件的方法，重新加载评论数据
                        this.loadComments();

                        //隐藏输入框
                        this.cancelInput();
                    }               
                    else
                        alert("提交失败");                                               
                    }
            });
        }
    }
}
</script>

<style scoped lang="scss">
    @import "../../../static/front-vue/scss/index";
    .write-reply {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: $text-minor;
        padding: 10px;              
        .el-icon-edit {
        margin-right: 5px;
        }
    }
   
    .comment_info_class {      
        float: right;
        margin-top: -3.7%
    }
    .info {
        color: blueviolet;
        font-size: 20px;
        font-weight: 800;        
    }
    .exit_text {
        color: blueviolet;
        font-size: 15px;
        font-weight: 100; 
    }
    hr {
        color: blueviolet;
        border-bottom: 0.5px solid blueviolet;
        width: 92%;
        margin-top: 0; 
        margin-left: 8.2%;
    } 
    .comment_ul {        
        list-style: none;
        
    }   
    .comment_ul li{
        overflow:hidden;
        width: 8.2%;
        height: 30px;
        border: 0.5px solid blueviolet;
        border-bottom:0px;
        margin-bottom: -0.2%;
        text-align: center;
        line-height: 30px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px; 
        color: blueviolet
    }  

</style>